<style lang="less">
    @import './index.less';
</style>

<template>
    <div>
      <Card shadow>
          <Row v-show="searchList" class="margin-bottom-8">
            <i-col span="17">
              <Input placeholder="职员姓名" size="small" style="width: 200px" v-model="employeeName"></Input>
              <Button class="margin-right-5" type="primary" size="small" icon="ios-search" @click="search">搜索</Button>
              <Button type="primary" size="small" icon="arrow-down-b" @click="showSearch">高级搜索</Button>
            </i-col>
            <i-col span="7">
                <add-btn class="pull-right" @addclick="addFormHandle"></add-btn>
            </i-col>
          </Row>
          <div v-show="!searchList" class="margin-bottom-8">
            <Row :gutter="10">
              <i-col span="3">
                <Input  size="small" placeholder="职员姓名" v-model="employeeName"></Input>
              </i-col>
              <i-col span="3">
                <Input size="small" placeholder="手机号" v-model="phone_num"></Input>
              </i-col>
              <i-col span="3">
                <Select clearable placeholder="在职状态" v-model="status" size="small">
                  <Option value="在职">在职</Option>
                  <Option value="离职">离职</Option>
                </Select>
              </i-col>
              <i-col span="4">
                <Cascader placeholder="部门" ref="department" :transfer="true" size="small" trigger="hover" filterable change-on-select :data="orgList" :load-data="loadOrgs" v-model="orgArray"></Cascader>
              </i-col>
              <i-col span="4">
                <DatePicker type="daterange" ref="entrydates" size="small" placeholder="入职时间范围" @on-change="setEntrydates" placement="bottom-end"></DatePicker>
              </i-col>
              <i-col span="5">
                <Button class="margin-right-5" type="primary" size="small" icon="ios-search" @click="search">搜索</Button>
                <Button type="primary" size="small" @click="showSearch" icon="arrow-up-b">收起</Button> 
              </i-col>
              <i-col span="2">
                <add-btn class="pull-right" @addclick="addFormHandle"></add-btn>
              </i-col>
            </Row>
          </div>
          
          <Table 
                  :context="self"
                  :loading="tableLoading"
                  :columns="column"
                  :data="employees">
          </Table>          
          <Page :current="currentPage" :total="totalCount" :page-size="pageSize" show-total @on-change="changepage"></Page>
      </Card>
      <Modal v-model="addModal" title="录入新员工信息" width="1000" ok-text="创建"  @on-ok="submitCreate('addFormValidate')" @on-cancel="cancel" :loading="addModalLoading">
        <Form ref="addFormValidate" :model="addForm" :rules="ruleValidate" label-position="right" :label-width="100">
          <div class="division-tips">
            <Button type="text" icon="arrow-up-b" v-show="positionInfo" @click="positionInfo = !positionInfo"></Button>
            <Button type="text" icon="arrow-down-b" v-show="!positionInfo" @click="positionInfo = !positionInfo"></Button>
            <span>入职信息</span>
          </div>
          <div v-show="positionInfo">
            <Row>
              <i-col span="8">
                <FormItem label="姓名" prop="employee_name">
                  <Input type="text" v-model="addForm.employee_name">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="部门" prop="org">
                  <Cascader :transfer="true" filterable trigger="hover" change-on-select :data="orgList" :load-data="loadOrgs" v-model="addForm.org"></Cascader>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="入职职位" prop="position_id">
                  <Select v-model="addForm.position_id" filterable clearable>
                    <Option v-for="p in positionList" :key="p.position_id" :value="p.position_id">{{p.position_name}}</Option>
                  </Select>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                  <FormItem label="职级">
                    <Input type="text" v-model="addForm.rank"></Input>
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="编制">
                    <Input type="text" v-model="addForm.organization"></Input>
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="入职时间">
                    <DatePicker type="date" ref="entrydate" format="yyyy-MM-dd" :clearable="true" :transfer="true" placement="bottom-start"  @on-change="setEntrydate"></DatePicker>
                  </FormItem>
                </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="转正时间">
                  <DatePicker type="date" ref="formaldate" format="yyyy-MM-dd" :transfer="true" placement="bottom-start"  @on-change="setFormaldate"></DatePicker>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="在职状态">
                  <Select v-model="addForm.status">
                    <Option value="在职">在职</Option>
                    <Option value="离职">离职</Option>
                  </Select>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="开通系统账号">
                  <i-switch size="large" v-model="sysAccountswitch">
                      <span slot="open">是</span>
                      <span slot="close">否</span>
                  </i-switch>
                </FormItem>
                <FormItem label="账号" v-show="sysAccountswitch === true">
                  <Input type="text" v-model="addForm.userName">
                  </Input>
                  <span style="color:#ed3f14">默认密码  new.1234</span>
                </FormItem>
              </i-col>
            </Row>
          </div>
          <div class="division-tips">
            <Button type="text" icon="arrow-up-b" v-show="personalInfo" @click="personalInfo = !personalInfo"></Button>
            <Button type="text" icon="arrow-down-b" v-show="!personalInfo" @click="personalInfo = !personalInfo"></Button>
            <span>个人信息</span>
          </div>
          <div v-show="personalInfo">
            <Row>
              <i-col span="8">
                <FormItem label="国籍">
                  <Input type="text" v-model="addForm.nationality">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="手机号">
                  <Input type="text" v-model="addForm.phone_num">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="身份证号">
                  <Input type="text" v-model="addForm.id_number">
                  </Input>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="籍贯" v-if="showOriginsChance">
                  <al-cascader v-model="origins" level="1"/>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="性别">
                  <Select v-model="addForm.sex">
                    <Option value="男">男</Option>
                    <Option value="女">女</Option>
                  </Select>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="出生日期">
                  <DatePicker type="date" ref="birth"  :transfer="true" placement="bottom-start" style="width: 221px" format="yyyy-MM-dd" @on-change="setBirth"></DatePicker>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="司龄">
                  <Input type="text" v-model="addForm.division_time">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="民族">
                  <Select v-model="addForm.nation">
                    <Option v-for="n in data.nation" :key="n.id" :value="n.name">{{n.name}}</Option>
                  </Select>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="年龄">
                  <Input type="text" v-model="addForm.age">
                  </Input>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="QQ号">
                  <Input type="text" v-model="addForm.qq_num">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="政治面貌">
                  <Select v-model="addForm.political_status">
                    <Option value="党员">党员</Option>
                    <Option value="团员">团员</Option>
                    <Option value="群众">群众</Option>
                  </Select>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="婚否">
                  <Select v-model="addForm.married">
                    <Option value="是">是</Option>
                    <Option value="否">否</Option>
                  </Select>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="身份证地址">
                  <Input type="text" v-model="addForm.id_card_address">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="现家庭地址">
                  <Input type="text" v-model="addForm.current_address">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="户口性质">
                  <Select v-model="addForm.registered_nature">
                    <Option value="农村">农村</Option>
                    <Option value="城镇">城镇</Option>
                  </Select>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="私人邮箱">
                  <Input type="text" v-model="addForm.personal_email">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="公司邮箱">
                  <Input type="text" v-model="addForm.company_email">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="户口所在地地址">
                  <Input type="text" v-model="addForm.registered_address">
                  </Input>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="紧急联系人">
                  <Input type="text" v-model="addForm.emergency_contact">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="与紧急联系人关系">
                  <Input type="text" v-model="addForm.emergency_relationship">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="紧急联系电话">
                  <Input type="text" v-model="addForm.emergency_phone">
                  </Input>
                </FormItem>
              </i-col>
            </Row>
          </div>
          <div class="division-tips">
            <Button type="text" icon="arrow-up-b" v-show="educationInfo" @click="educationInfo = !educationInfo"></Button>
            <Button type="text" icon="arrow-down-b" v-show="!educationInfo" @click="educationInfo = !educationInfo"></Button>
            <span>教育信息</span>
          </div>
          <div v-show="educationInfo">
            <Row>
              <i-col span="8">
                <FormItem label="最高学历">
                  <Input type="text" v-model="addForm.diploma_highest"></Input>
                </FormItem>
              </i-col>
            </Row>
            <Row v-show="educationInfo" v-for="(item,index) in addForm.educations" :key="index">
              <i-col span="8">
                <FormItem label="教育开始时间">
                  <DatePicker type="date" ref="edu_start" :transfer="true" placement="bottom-start"  style="width: 221px" format="yyyy-MM-dd" @on-change="(data) => {setEduStart(data,index)}"></DatePicker>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="教育结束时间">
                  <DatePicker :transfer="true" ref="edu_end"  type="date"  style="width: 221px"  placement="bottom-start" format="yyyy-MM-dd" @on-change="(data) => {setEduEnd(data,index)}"></DatePicker>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="学习形式">
                  <Select v-model="item.modality">
                    <Option value="全日制">全日制</Option>
                    <Option value="脱产制">脱产制</Option>
                    <Option value="自考">自考</Option>
                  </Select>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="学校">
                  <Input type="text" v-model="item.school">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="院系">
                  <Input type="text" v-model="item.college">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="专业">
                  <Input type="text" v-model="item.major">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="学历">
                  <Select v-model="item.diploma">
                    <Option value="博士研究生">博士研究生</Option>
                    <Option value="硕士研究生">硕士研究生</Option>
                    <Option value="本科">本科</Option>
                    <Option value="专科">专科</Option>
                    <Option value="其他">其他</Option>
                  </Select>
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="学位">
                  <Select v-model="item.degree">
                    <Option value="博士">博士</Option>
                    <Option value="硕士">硕士</Option>
                    <Option value="学士">学士</Option>
                    <Option value="其他">其他</Option>
                  </Select>
                </FormItem>
              </i-col>
              <i-col span="1" pull="2">
                <FormItem>
                  <Button type="text" icon="trash-a" v-show="index !== 0" @click="removeEducations(index)"></Button>
                </FormItem>
              </i-col>
            </Row>
            <Row class="margin-bottom-10">
              <i-col span="4" offset="4">
                <Button type="dashed" icon="plus" @click="addEducationHandle">添加更多教育信息</Button>
              </i-col>
            </Row>
          </div>
          <div class="division-tips">
            <Button type="text" icon="arrow-up-b" v-show="workInfo" @click="workInfo = !workInfo"></Button>
            <Button type="text" icon="arrow-down-b" v-show="!workInfo" @click="workInfo = !workInfo"></Button>
            <span>工作履历</span>
          </div>
          <div v-show="workInfo">
            <Row>
              <i-col span="8">
                <FormItem label="参加工作日期">
                    <DatePicker :transfer="true" ref="joinWorkDate" placement="bottom-start" type="date"  style="width: 221px" format="yyyy-MM-dd" @on-change="setJoinWorkDate"></DatePicker>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="工作年限">
                  <Input type="text" v-model="addForm.work_time">
                  </Input>
                </FormItem>
              </i-col>
            </Row>
            <Row v-for="(item,index) in addForm.workhistories" :key="index">
              <i-col span="8">
                <FormItem label="开始时间">
                    <DatePicker type="date" ref="work_start" style="width: 221px" format="yyyy-MM-dd"  :transfer="true" placement="bottom-start"  @on-change="(data) => {setWorkStart(data,index)}"></DatePicker>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="结束时间">
                  <DatePicker type="date" ref="work_end" style="width: 221px" format="yyyy-MM-dd"  :transfer="true" placement="bottom-start" @on-change="(data) => {setWorkEnd(data,index)}"></DatePicker>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="单位名称">
                    <Input type="text" v-model="item.company_name">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="任职岗位">
                    <Input type="text" v-model="item.position_name">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="1" pull="2">
                <FormItem>
                  <Button type="text" icon="trash-a" v-show="index !== 0" @click="removeWorkhistories(index)"></Button>
                </FormItem>
              </i-col>
            </Row>
            <Row class="margin-bottom-10">
              <i-col span="4" offset="4">
                <Button type="dashed" icon="plus" @click="addWorkHandle">添加更多工作经历</Button>
              </i-col>
            </Row>
          </div>
          <div class="division-tips">
            <Button type="text" icon="arrow-up-b" v-show="certificateInfo" @click="certificateInfo = !certificateInfo"></Button>
            <Button type="text" icon="arrow-down-b" v-show="!certificateInfo" @click="certificateInfo = !certificateInfo"></Button>
            <span>证书管理</span>
          </div>
          <div v-show="certificateInfo">
            <Row v-for="(item,index) in addForm.certificates" :key="index">
              <i-col span="7">
                <FormItem label="证书信息">
                  <Input type="text" v-model="item.certificate_name">
                  </Input>                     
                  </FormItem>
              </i-col>
              <i-col span="7">
                <FormItem label="职称">
                  <Input type="text" v-model="item.certificate_position">
                  </Input> 
                </FormItem>
              </i-col>
              <i-col span="7">
                <FormItem label="备注">
                  <Input type="text" v-model="item.remark">
                  </Input> 
                </FormItem>
              </i-col>
              <i-col span="1" pull="2">
                <FormItem>
                  <Button type="text" icon="trash-a" v-show="index !== 0" @click="removeCertificates(index)"></Button>
                </FormItem>
              </i-col>
            </Row>
            <Row class="margin-bottom-10">
              <i-col span="4" offset="4">
                <Button type="dashed" icon="plus" @click="addCertificateHandle">添加更多证书信息</Button>
              </i-col>
            </Row>
          </div>
          <div class="division-tips">
            <Button type="text" icon="arrow-up-b" v-show="bankInfo" @click="bankInfo = !bankInfo"></Button>
            <Button type="text" icon="arrow-down-b" v-show="!bankInfo" @click="bankInfo = !bankInfo"></Button>
            <span>银行卡信息</span>
          </div>
          <div v-show="bankInfo">
            <Row>
              <i-col span="16" offset="3">
                <FormItem label="工资卡">
                    <Input v-model="addForm.wage_card_number"></Input>
                </FormItem>
                <FormItem label="工资卡开户行">
                    <Input v-model="addForm.wage_card_bank"></Input>
                </FormItem>
                <FormItem label="报销卡">
                    <Input v-model="addForm.reimbursement_card_number"></Input>
                </FormItem>
                <FormItem label="报销卡开户行">
                    <Input v-model="addForm.reimbursement_card_bank"></Input>
                </FormItem>
              </i-col>
            </Row>
          </div>
          <div class="division-tips">
            <Button type="text" icon="arrow-up-b" v-show="contractInfo" @click="contractInfo = !contractInfo"></Button>
            <Button type="text" icon="arrow-down-b" v-show="!contractInfo" @click="contractInfo = !contractInfo"></Button>
            <span>合同信息</span>
          </div>
          <div v-show="contractInfo">
            <Row v-for="(i,index) in addForm.contracts" :key="index" ref="contracts">
              <i-col span="8">
                <FormItem label="签订日期">
                    <DatePicker type="date" ref="contract_start"  style="width: 221px" :transfer="true" placement="bottom-start" @on-change="(data) => {setContractsStart(data,index)}"></DatePicker>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="签订年限">
                  <Input type="text" v-model="i.duration">
                  </Input> 
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="终止日期">
                  <DatePicker type="date" ref="contract_end" style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" @on-change="(data) => {setContractsEnd(data,index)}"></DatePicker>
                </FormItem>
              </i-col>
            </Row>
            <Row class="margin-bottom-10">
              <i-col span="4" offset="4">
                <Button type="dashed" icon="plus" @click="addContracteHandle">添加更多合同信息</Button>
              </i-col>
            </Row>
          </div>
        </Form>
      </Modal>
      <Modal v-model="modifyModal" title="修改员工信息" width="1000" ok-text="修改"  @on-ok="submitModify('modifyFormValidate')" @on-cancel="cancel" :loading="modifyModalLoading">
        <Form ref="modifyFormValidate" :rules="ruleValidate" :model="modifyForm" label-position="right" :label-width="100">
          <div class="division-tips">
            <Button type="text" icon="arrow-up-b" v-show="positionInfo" @click="positionInfo = !positionInfo"></Button>
            <Button type="text" icon="arrow-down-b" v-show="!positionInfo" @click="positionInfo = !positionInfo"></Button>
            <span>入职信息</span>
          </div>
          <div v-show="positionInfo">
            <Row>
              <i-col span="8">
                <FormItem label="姓名">
                  <Input type="text" v-model="modifyForm.employee_name">
                  </Input>
                  <p class="ivu-form-item-error-tip" v-show="!modifyForm.user_id">该职员未注册系统账号</p>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="部门" prop="org">
                  <Input type="text" v-model="modifyForm.org_name" disabled></Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="入职职位">
                  <Input type="text" v-model="modifyForm.position_name" disabled></Input>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                  <FormItem label="职级">
                    <Input type="text" v-model="modifyForm.rank"></Input>
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="编制">
                    <Input type="text" v-model="modifyForm.organization"></Input>
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="入职时间">
                    <DatePicker style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="modifyForm.entrydate" @on-change="setEntrydate"></DatePicker>
                  </FormItem>
                </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="转正时间">
                    <DatePicker style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="modifyForm.formaldate"  @on-change="setFormaldate"></DatePicker>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="在职状态">
                  <Select v-model="modifyForm.status">
                    <Option value="在职">在职</Option>
                    <Option value="离职">离职</Option>
                  </Select>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="系统账号" v-show="!modifyForm.user_id">
                  <i-switch size="large" v-model="sysAccountswitch">
                      <span slot="open">是</span>
                      <span slot="close">否</span>
                  </i-switch>
                </FormItem>
                <FormItem label="账号" v-show="sysAccountswitch === true">
                  <Input type="text" v-model="modifyForm.userName">
                  </Input>
                </FormItem>
              </i-col>
            </Row>
          </div>
          <div class="division-tips">
            <Button type="text" icon="arrow-up-b" v-show="personalInfo" @click="personalInfo = !personalInfo"></Button>
            <Button type="text" icon="arrow-down-b" v-show="!personalInfo" @click="personalInfo = !personalInfo"></Button>
            <span>个人信息</span>
          </div>
          <div v-show="personalInfo">
            <Row>
              <i-col span="8">
                <FormItem label="国籍">
                  <Input type="text" v-model="modifyForm.nationality">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="手机号">
                  <Input type="text" v-model="modifyForm.phone_num">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="身份证号">
                  <Input type="text" v-model="modifyForm.id_number">
                  </Input>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="籍贯">
                  <al-cascader v-model="origins" level="1"/>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="性别">
                  <Select v-model="modifyForm.sex">
                    <Option value="男">男</Option>
                    <Option value="女">女</Option>
                  </Select>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="出生日期">
                  <DatePicker type="date"  style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="modifyForm.birth" @on-change="setBirth"></DatePicker> 
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="司龄">
                  <Input type="text" v-model="modifyForm.division_time">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="民族">
                  <Select v-model="modifyForm.nation">
                    <Option v-for="n in data.nation" :key="n.id" :value="n.name">{{n.name}}</Option>
                  </Select>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="年龄">
                  <Input type="text" v-model="modifyForm.age">
                  </Input>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="QQ号">
                  <Input type="text" v-model="modifyForm.qq_num">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="政治面貌">
                  <Select v-model="modifyForm.political_status">
                    <Option value="党员">党员</Option>
                    <Option value="团员">团员</Option>
                    <Option value="群众">群众</Option>
                  </Select>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="婚否">
                  <Select v-model="modifyForm.married">
                    <Option value="是">是</Option>
                    <Option value="否">否</Option>
                  </Select>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="身份证地址">
                  <Input type="text" v-model="modifyForm.id_card_address">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="现家庭地址">
                  <Input type="text" v-model="modifyForm.current_address">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="户口性质">
                  <Select v-model="modifyForm.registered_nature">
                    <Option value="农村">农村</Option>
                    <Option value="城镇">城镇</Option>
                  </Select>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="私人邮箱">
                  <Input type="text" v-model="modifyForm.personal_email">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="公司邮箱">
                  <Input type="text" v-model="modifyForm.company_email">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="户口所在地地址">
                  <Input type="text" v-model="modifyForm.registered_address">
                  </Input>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8">
                <FormItem label="紧急联系人">
                  <Input type="text" v-model="modifyForm.emergency_contact">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="与紧急联系人关系">
                  <Input type="text" v-model="modifyForm.emergency_relationship">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="紧急联系电话">
                  <Input type="text" v-model="modifyForm.emergency_phone">
                  </Input>
                </FormItem>
              </i-col>
            </Row>

          </div>
          <div class="division-tips">
            <Button type="text" icon="arrow-up-b" v-show="educationInfo" @click="educationInfo = !educationInfo"></Button>
            <Button type="text" icon="arrow-down-b" v-show="!educationInfo" @click="educationInfo = !educationInfo"></Button>
            <span>教育信息</span>
          </div>
          <div v-show="educationInfo">
            <Row>
              <i-col span="8">
                <FormItem label="最高学历">
                  <Input type="text" v-model="modifyForm.diploma_highest">
                    </Input>
                  </FormItem>
              </i-col>
            </Row>
            <Row  v-for="(item,index) in modifyForm.educations" :key="index">
              <i-col span="8">
                <FormItem label="教育开始时间">
                  <DatePicker type="date"  style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="item.start" @on-change="(data) => {setEduStart(data,index)}"></DatePicker>
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="教育结束时间">
                  <DatePicker type="date"  style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="item.end" @on-change="(data) => {setEduEnd(data,index)}"></DatePicker>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="学习形式">
                  <Select v-model="item.modality">
                    <Option value="全日制">全日制</Option>
                    <Option value="脱产制">脱产制</Option>
                    <Option value="自考">自考</Option>
                  </Select>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="学校">
                  <Input type="text" v-model="item.school">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="院系">
                  <Input type="text" v-model="item.college">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="专业">
                  <Input type="text" v-model="item.major">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="学历">
                  <Select v-model="item.diploma">
                    <Option value="博士研究生">博士研究生</Option>
                    <Option value="硕士研究生">硕士研究生</Option>
                    <Option value="本科">本科</Option>
                    <Option value="专科">专科</Option>
                    <Option value="其他">其他</Option>
                  </Select>
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="学位">
                  <Select v-model="item.degree">
                    <Option value="博士">博士</Option>
                    <Option value="硕士">硕士</Option>
                    <Option value="学士">学士</Option>
                    <Option value="其他">其他</Option>
                  </Select>
                </FormItem>
              </i-col>
              <i-col span="1" pull="2">
                <FormItem>
                  <Button type="text" icon="trash-a" v-show="index !== 0" @click="removeEducations(index)"></Button>
                </FormItem>
              </i-col>
            </Row>
            <Row class="margin-bottom-10">
              <i-col span="4" offset="4">
                <Button type="dashed" icon="plus" @click="addEducationHandle">添加更多教育信息</Button>
              </i-col>
            </Row>
          </div>
          <div class="division-tips">
            <Button type="text" icon="arrow-up-b" v-show="workInfo" @click="workInfo = !workInfo"></Button>
            <Button type="text" icon="arrow-down-b" v-show="!workInfo" @click="workInfo = !workInfo"></Button>
            <span>工作履历</span>
          </div>
          <div v-show="workInfo">
            <Row>
              <i-col span="8">
                <FormItem label="参加工作日期">
                  <DatePicker type="date"  style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="modifyForm.join_work_date"></DatePicker>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="工作年限">
                  <Input type="text" v-model="modifyForm.work_time">
                  </Input>
                </FormItem>
              </i-col>
            </Row>
            <Row v-for="(item,index) in modifyForm.workhistories" :key="index">
              <i-col span="8">
                <FormItem label="开始时间">
                    <DatePicker type="date"  style="width: 222px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="item.start" @on-change="(data) => {setWorkStart(data,index)}"></DatePicker>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="结束时间">
                  <DatePicker type="date"  style="width: 222px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="item.end" @on-change="(data) => {setWorkEnd(data,index)}"></DatePicker>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="单位名称">
                    <Input type="text" v-model="item.company_name">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="任职岗位">
                    <Input type="text" v-model="item.position_name">
                  </Input>
                </FormItem>
              </i-col>
              <i-col span="1" pull="2">
                <FormItem>
                  <Button type="text" icon="trash-a" v-show="index !== 0" @click="removeWorkhistories(index)"></Button>
                </FormItem>
              </i-col>
            </Row>
            <Row class="margin-bottom-10">
              <i-col span="4" offset="4">
                <Button type="dashed" icon="plus" @click="addWorkHandle">添加更多工作经历</Button>
              </i-col>
            </Row>
          </div>
          <div class="division-tips">
            <Button type="text" icon="arrow-up-b" v-show="certificateInfo" @click="certificateInfo = !certificateInfo"></Button>
            <Button type="text" icon="arrow-down-b" v-show="!certificateInfo" @click="certificateInfo = !certificateInfo"></Button>
            <span>证书管理</span>
          </div>
          <div v-show="certificateInfo">
            <Row v-for="(item,index) in modifyForm.certificates" :key="index">
              <i-col span="7">
                <FormItem label="证书信息">
                  <Input type="text" v-model="item.certificate_name">
                  </Input>                     
                  </FormItem>
              </i-col>
              <i-col span="7">
                <FormItem label="职称">
                  <Input type="text" v-model="item.certificate_position">
                  </Input> 
                </FormItem>
              </i-col>
              <i-col span="7">
                <FormItem label="备注">
                  <Input type="text" v-model="item.remark">
                  </Input> 
                </FormItem>
              </i-col>
              <i-col span="1" pull="2">
                <FormItem>
                  <Button type="text" icon="trash-a" v-show="index !== 0" @click="removeCertificates(index)"></Button>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="4" offset="4">
                <Button type="dashed" icon="plus" @click="addCertificateHandle">添加证书信息</Button>
              </i-col>
            </Row>
          </div>
          <div class="division-tips">
            <Button type="text" icon="arrow-up-b" v-show="bankInfo" @click="bankInfo = !bankInfo"></Button>
            <Button type="text" icon="arrow-down-b" v-show="!bankInfo" @click="bankInfo = !bankInfo"></Button>
            <span>银行卡信息</span>
          </div>
          <Row v-show="bankInfo">
            <i-col span="16" offset="3">
              <FormItem label="工资卡">
                  <Input v-model="modifyForm.wage_card_number"></Input>
              </FormItem>
              <FormItem label="工资卡开户行">
                  <Input v-model="modifyForm.wage_card_bank"></Input>
              </FormItem>
              <FormItem label="报销卡">
                  <Input v-model="modifyForm.reimbursement_card_number"></Input>
              </FormItem>
              <FormItem label="报销卡开户行">
                  <Input v-model="modifyForm.reimbursement_card_bank"></Input>
              </FormItem>
            </i-col>
          </Row>
        </Form>
      </Modal>
    </div>
</template>

<script>
  import _ from 'lodash';
  import moment from 'moment';
  import data from "./column";
  import addBtn from './component/access-add-button.vue';
  //import deleteBtn from './component/access-delete-button.vue';
  import modifyBtn from './component/access-modify-button.vue';
  import detailBtn from './component/access-detail-button.vue';
  import modifyDetailBtn from './component/access-detail-modify-button.vue';
  import alCascader from '@/views/my-components/area-linkage/components/al-cascader.vue';

  export default {
    data () {
      return {
        // 控制弹出框中的输入项，默认收起
        positionInfo: false,
        personalInfo:false,
        educationInfo:false,
        workInfo:false,
        certificateInfo:false,
        bankInfo:false,
        contractInfo:false,
        index:'',
        orgArray:[],
        employeeName:'',
        org_id:'',
        phone_num:'',
        status:'',
        entrydate_start:'',
        entrydate_end:'',
        self: this,
        data:data,
        showOriginsChance:true,
        addModalLoading:true,
        modifyModalLoading:true,
        origins:[],
        sysAccountswitch:false,
        
        roleList:[],
        orgList:[],
        org:[],
        allOrgs:[],
        positionList:[],
        searchKey: '',
        searchList:true,
        tableLoading: false,
        addModal:false,
        showModal:false,
        modifyModal:false,
        addForm:{
          status:'在职',
          educations:[{
            start:'',
            end:''
          }],
          workhistories:[{
            start:'',
            end:''
          }],
          certificates:[{}],
          contracts:[{
            start:'',
            end:''
          }],
          origins:[],
        },
        ruleValidate:{
          org: [
            { required: true, type: 'array', message: '请选择部门', trigger: 'blur' }
          ],
          position_id:[
            { required: true, message: '请选择职位', trigger: 'blur' }
          ],
          employee_name:[
            { required: true, message: '请填写职工姓名', trigger: 'blur' }
          ]
        },
        modifyForm:{
          educations:[{
            start:'',
            end:''
          }],
          workhistories:[{
            start:'',
            end:''
          }],
          certificates:[{}],
          contracts:[{
            start:'',
            end:''
          }],
        },
        showForm:{},
        employees:[],
        pageSize: 15,
        currentPage: 1,
        totalCount: 0,
        column: [
        // {
        //   title:'序号',
        //   type:'index',
        //   align:'center'
        // },
        {
          //width: 150,
          title: '职员姓名',
          key: 'employee_name',
          align:'center'
        }, {
          title: '部门',
          align: 'center',
          key:'org_name'
        }, {
          title: '职务',
          align: 'center',
          key:'position_name'
        },{
          title:'在职状态',
          align:'center',
          key:'status',
          render:(h,params) => {
            if(params.row.status === '在职') {
              return h('span',{},params.row.status)
            }else {
              return h('span',{
                style:{
                  color:'#ed3f14'
                }
              },params.row.status)
            }
          }
        },{
          title: '操作',
          align: 'center',
          render: (h, params) => {
              return h('div', [
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    content: '查看'
                  }
                }, [h(detailBtn, {
                  on: {
                    detailClick: () => {
                      this.$router.push({
                        name:'hr_employee-mgt-detail',
                        params:{id:params.row.employee_id}
                      })
                    }
                  }
                })]),
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    content: '编辑'
                  }
                }, [h(modifyBtn, {
                  on: {
                    modifyClick: () => {
                      this.modify(params.row.employee_id);
                    }
                  }
                }
                )])
                // h('Tooltip', {
                //   props: {
                //     placement: 'top',
                //     content: '删除'
                //   }
                // }, [h(deleteBtn, {
                //   on: {
                //     delclick: () => {
                //       this.$Modal.confirm({
                //         title: '确认',
                //         content: '确认要删除【' + params.row.employee_name + '】吗？',
                //         onOk: () => {
                //           this.remove(params.row);
                //         }
                //       });
                //     }
                //   }
                // })])
              ]);
            }
        }
      ]};
    },
    methods: {
      // getEmployee () {
      //   this.$http.get('/hr/employees').then((res) => {
      //   this.employees = res.data
      //   }).catch(() => {
      //     this.$Message.error('获取人员失败')
      //   })
      // },
      getEmployee () {
        this.$http.get('/hr/employees/page?employee_name='+ encodeURI(this.employeeName) +'&org_id='+ encodeURI(this.org_id) +'&phone_num='+ encodeURI(this.phone_num) +'&status='+ encodeURI(this.status) + '&entrydate_start='+encodeURI(this.entrydate_start)+'&entrydate_end='+encodeURI(this.entrydate_end) + '&pageSize='+ this.pageSize +'&currentPage='+this.currentPage).then((res) => {
          this.employees = res.data.returnValue.data
          this.totalCount = res.data.returnValue.totalCount
        }).catch(() => {
          this.$Message.error('获取人员失败')
        })
      },
      changepage(page){
        this.currentPage = page
        this.getEmployee()
      },

      getPositions() {
        this.$http.get('/hr/positions').then((res) => {
          this.positionList = res.data
        })
      },
      getOrgs() {
        this.$http.get('/hr/orglist').then((res) => {
          this.orgList = _.map(res.data, o => {
            o.value = o.org_id
            o.label = o.org_name
            this.$http.get('/hr/orglist?org_id=' + o.org_id).then((res) => {
              if(res.data.length !== 0) {
                o.loading = false
                o.children = []
              }
            })
            return o
          })
        })
      },
      getAllOrgs() {
        this.$http.get('/hr/orglist?org_id=all').then((res) => {
          this.allOrgs = res.data
        })
      },
      loadOrgs(item,callback) {
        item.loading = true;
        this.$http.get('/hr/orglist?org_id=' + item.org_id).then((res) => {
          item.loading = false;
          res.data.forEach(r => {
            r.value = r.org_id
            r.label = r.org_name
            this.$http.get('/hr/orglist?org_id='+ r.org_id).then((res) => {
              if(res.data.length !== 0) {
                r.loading = false
                r.children = []
              }
            })
          return r
        })
          item.children = res.data
          item.loading = false;
          callback()
        })
      },
      changeCascader(value,selectedData) {
      },
      addCertificateHandle() {
        this.addForm.certificates.push({
          certificate_name:'',
          certificate_position:'',
          remark:''
        }),
        this.modifyForm.certificates.push({
          certificate_name:'',
          certificate_position:'',
          remark:''
        })
      },
      addContracteHandle() {
        this.addForm.contracts.push({
          start:'',
          duration:'',
          end:''
        })
        this.modifyForm.contracts.push({
          start:'',
          duration:'',
          end:''
        })
      },
      addWorkHandle() {
        this.addForm.workhistories.push({
          start:'',
          start:'',
          work_name:'',
          work_position:''
        }),
        this.modifyForm.workhistories.push({
          start:'',
          start:'',
          work_name:'',
          work_position:''
        })
      },
      addEducationHandle() {
        this.addForm.educations.push({
          start:'',
          end:'',
          modality:'',
          school:'',
          college:'',
          major:'',
          diploma:'',
          degree:'',
        }),
        this.modifyForm.educations.push({
          start:'',
          end:'',
          modality:'',
          school:'',
          college:'',
          major:'',
          diploma:'',
          degree:'',
        })
      },
      addFormHandle () {
        this.addModal = true
        this.showOriginsChance = true
        this.getPositions()
        this.getOrgs()
      },
      // 图片上传
      handleSuccess(res) {
        if (res.success === true) {
          this.addForm.image_id = res.returnValue;
        } else {
          this.$Message.error('图片上传失败,请重试');
        }
      },
      handleFormatError (file) {
        this.$Notice.warning({
          title: '文件格式不合法',
          desc: file.name + ' 的文件格式不合法,请选择.jpg或.png文件上传'
        });
      },
      submitCreate(name) {
        this.$refs[name].validate((valid) => {
            if (valid) {
              this.addForm.org_id = this.addForm.org[this.addForm.org.length -1]
              this.addForm.org_ids = JSON.stringify(this.addForm.org)
              this.addForm.origins = JSON.stringify(this.origins)
              this.$http.post('/hr/employee',this.addForm).then((res) => {
                this.getEmployee()
                this.$Message.success('添加成功')
                this.addModal = false
                this.addForm = {
                  educations:[{}],
                  workhistories:[{}],
                  certificates:[{}],
                  contracts:[{}]
                }
                this.cleanDatePicker()
                this.sysAccountswitch = false
                this.$nextTick(() => {
                  this.showOriginsChance = false
                })
              }).catch(() => {
                this.$Message.error('添加失败，请重试！')
              })
            } else {
              this.$Message.error('请检查所有必填的字段')
              this.addModalLoading = false
              this.$nextTick(() => {
                this.addModalLoading = true
              })
            }
        })
        
      },
      cleanDatePicker() {
        this.$refs.birth.handleClear()
        this.$refs.edu_start[0].handleClear()
        this.$refs.edu_end[0].handleClear()
        this.$refs.joinWorkDate.handleClear()
        this.$refs.work_start[0].handleClear()
        this.$refs.work_end[0].handleClear()
        this.$refs.contract_start[0].handleClear()
        this.$refs.contract_end[0].handleClear()
        this.$refs.formaldate.handleClear()
        this.$refs.entrydate.handleClear()
      },
      cancel() {
        // 初始化addForm
        this.org =[]
        this.sysAccountswitch = false
        this.addForm = {
          status:'在职',
          educations:[{}],
          workhistories:[{}],
          certificates:[{}],
          contracts:[{}],
        }
        // 清空籍贯的选择值
        this.$nextTick(() => {
          this.showOriginsChance = false
        })
        // 清空表单验证
        this.$refs['addFormValidate'].resetFields();
        this.$refs['modifyFormValidate'].resetFields();
        // 清空datepicker绑定
        this.cleanDatePicker()
      },
      show(employee_id) {
        this.showModal = true
        this.$http.get('/hr/employee/' + employee_id ).then((res) => {
          this.showForm = res.data.returnValue
          this.showForm.origins= _.map(JSON.parse(this.showForm.origins),'code')
        })
      },
      modify(employee_id) {
        this.getPositions()
        this.getOrgs()
        this.$http.get('/hr/employee/' + employee_id ).then((res) => {
          this.modifyForm = res.data.returnValue
          this.modifyForm.org = JSON.parse(this.modifyForm.org_ids)
          this.origins= _.map(JSON.parse(this.modifyForm.origins),'code')
        })
        setTimeout(() => {
          this.modifyModal = true
        }, 500);
      },
      submitModify(name) {
        this.$refs[name].validate((valid) => {
          if(valid) {
            this.modifyForm.org_id = this.modifyForm.org[this.modifyForm.org.length - 1]
            this.modifyForm.org_ids = JSON.stringify(this.modifyForm.org)
            delete this.modifyForm.org_name
            delete this.modifyForm.origins
            this.$http.put('/hr/employee',this.modifyForm).then((res) => {
              this.$Message.success('员工信息修改成功！')
              this.modifyModal = false
              this.getEmployee();
            }).catch(() => {
              this.$Message.error('修改失败，请重试！')
            })
          }else {
            this.modifyModalLoading = false
            this.$nextTick(() => {
              this.modifyModalLoading = true
            })
          }
        })
      },
      remove() {
        this.$Message.info('该功能暂未实现')
      },
      setEntrydate(value) {
        this.addForm.entrydate = value
        this.modifyForm.entrydate = value
      },
      setFormaldate(value) {
        this.addForm.formaldate = value
        this.modifyForm.formaldate = value
      },
      setBirth(value) {
        this.addForm.birth = value
        this.modifyForm.birth = value
      },
      setEduStart(value,index) {
        this.addForm.educations[index].start = value
        this.modifyForm.educations[index].start = value
      },
      setEduEnd(value,index) {
        this.addForm.educations[index].end = value
        this.modifyForm.educations[index].end = value
      },
      setJoinWorkDate(value) {
        this.addForm.join_work_date = value
        this.modifyForm.join_work_date = value
      },
      setWorkStart(value,index) {
        this.addForm.workhistories[index].start = value
        this.modifyForm.workhistories[index].start = value
      },
      setWorkEnd(value,index) {
        this.addForm.workhistories[index].end = value
        this.modifyForm.workhistories[index].end = value
      },
      setContractsStart(value,index) {
        this.addForm.contracts[index].start = value
        this.modifyForm.contracts[index].start = value
      },
      setContractsEnd(value,index) {
        this.addForm.contracts[index].end = value
        this.modifyForm.contracts[index].end = value
      },
      setEntrydates(date) {
        this.entrydate_start = date[0]
        typeof(date[1]) != "undefined" ? this.entrydate_end = date[1]:this.entrydate_end = ''
      },
      showSearch() {
        this.searchList = !this.searchList
        this.employeeName =''
        this.org_id =''
        this.phone_num =''
        this.entrydate_start =''
        this.entrydate_end =''
        this.status =''
        this.$refs['entrydates'].handleClear()
        this.$refs['department'].clearSelect()
        this.getEmployee();
      },
      search() {
        this.orgArray.length !== 0 ? this.org_id = this.orgArray[this.orgArray.length - 1]:this.org_id = ''
        this.getEmployee();
      },
      removeCertificates(index) {
        this.modifyForm.certificates.splice(index,1)
        this.addForm.certificates.splice(index,1)
      },
      removeWorkhistories(index) {
        this.modifyForm.workhistories.splice(index,1)
        this.addForm.workhistories.splice(index,1)
      },
      removeEducations(index) {
        this.modifyForm.educations.splice(index,1)
        this.addForm.educations.splice(index,1)
      }
    },
    components: {
      addBtn,
      modifyBtn,
      alCascader,
      modifyDetailBtn,
      detailBtn
    },
    computed: {
      token: {
        get() {
          return this.$auth.token()
        }
      },
      dynamicOrg: {
        get() {
          return this.$store.state.hr.dynamicOrg
        }
      }
    },
    watch: {},
    mounted () {
      this.getEmployee();
      this.getAllOrgs(),
      this.getOrgs()
    }
  };
</script>
